<template>
  <div class="ranking-box">
    <div class="left-title">
      <img v-if="titleImg" :src="topImg" class="title-img" />
      {{title}}
    </div>
    <div class="sort-box">
      <span class="sort-item" v-for="(item,index) in sort" :key="index" @click="sortClick(item)"
      :class="item.id == current ? 'sort-action' : ''"
      >
        {{item.name}}
      </span>
    </div>
  </div>
</template>

<script>
  export default{
    name:"ranking-box",
    data(){
      return{
         topImg:"http://central.hld110.com/up/photo/15ea2915704f34.png"
      }
    },
    props:{
      sort:{
        type:Array,
        default:[]
      },
      title:{
        type:String,
        default:''
      },
      current:{
        type:Number,
        default:0
      },
      titleImg:{
        type:Boolean,
        default:false
      }
    },
    methods:{
      sortClick(item){
        if(this.current == item.id){
          return false
        }
        this.$emit("sortClick",item)
      }
    }
  }
</script>

<style scoped="scoped" lang="stylus">

  .ranking-box{
    width:100%;
    background:#FFFFFF;
    line-height:1.3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    .left-title{
      color:#000000;
      font-size:14px;
      font-weight:bold;
      white-space: nowrap;
      .title-img{
        height:14px;
        vertical-align:middle;
      }
    }
    .sort-box{
      white-space: nowrap;
      .sort-item{
        color:#6a6a6a;
        font-size:12px;
        padding:4px 6px;
        background:#eeeeee;
        border-radius:12px 12px;
        margin-left:10px;
      }
      .sort-action{
        color:#FFFFFF;
        background:#835eea;
      }
    }
  }
</style>
